<script setup lang="ts">
  import { watch } from 'vue';
  import DetailDrawer from '@/components/detail-drawer/index.vue';
  import { useForm } from '@/hooks/arco/useForm';
  import useDetailDrawerBinder from '@/hooks/arco/useDetailDrawerBinder';
  import DictSelect from '@/components/dict-select/index.vue';

  // 定义组件属性
  interface DrawerProps {
    onSuccess?: () => void;
  }

  const props = withDefaults(defineProps<DrawerProps>(), {
    onSuccess: () => {},
  });

  // 表单验证规则
  const formRules = {
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    department: [{ required: true, message: '请选择部门', trigger: 'change' }],
  };

  // 使用useForm hook
  const form = useForm({
    state: {
      id: '',
      name: '',
      age: '',
      email: '',
      department: '',
      createdAt: '',
    },
    rules: formRules,
  });

  // 使用detail drawer binder
  const editModal = useDetailDrawerBinder({
    modalName: '员工信息',
    onShow: async (mode: string, record: any) => {
      // 详情模式下获取详细信息
      if (mode === 'detail' && record?.id) {
        // 模拟API调用
        return new Promise((resolve) => {
          setTimeout(() => {
            form.setFieldsValue({
              ...record,
            });
            resolve(record);
          }, 300);
        });
      }
      // 编辑模式下设置表单值
      else if (mode === 'edit' && record) {
        form.setFieldsValue({
          ...record,
        });
      }
      // 新增模式下重置表单
      else if (mode === 'add') {
        form.backToInit();
      }
    },
    onOkClick: async (mode: string) => {
      // 表单验证
      await form.validate();

      // 模拟API调用
      if (mode === 'add') {
        return new Promise((resolve) => {
          setTimeout(() => {
            console.log('新增数据:', form.state);
            resolve(form.state);
          }, 500);
        });
      } else if (mode === 'edit') {
        return new Promise((resolve) => {
          setTimeout(() => {
            console.log('编辑数据:', form.state);
            resolve(form.state);
          }, 500);
        });
      }

      return Promise.resolve();
    },
  });

  // 暴露方法给父组件
  defineExpose(editModal.expose);
</script>

<template>
  <DetailDrawer v-bind="editModal.bindProps">
    <template #default>
      <a-form
        v-bind="form.bindProps"
        :model="form.state"
        label-align="right"
        auto-label-width
      >
        <a-grid :cols="24" :col-gap="12" :row-gap="0">
          <a-grid-item :span="24">
            <a-form-item field="name" label="姓名">
              <template v-if="editModal.bindProps.mode === 'detail'">
                <span>{{ form.state.name }}</span>
              </template>
              <a-input
                v-else
                v-model="form.state.name"
                placeholder="请输入姓名"
              />
            </a-form-item>
          </a-grid-item>

          <a-grid-item :span="12">
            <a-form-item field="age" label="年龄">
              <template v-if="editModal.bindProps.mode === 'detail'">
                <span>{{ form.state.age }}</span>
              </template>
              <a-input-number
                v-else
                v-model="form.state.age"
                placeholder="请输入年龄"
                mode="button"
                :min="1"
                :max="120"
              />
            </a-form-item>
          </a-grid-item>

          <a-grid-item :span="12">
            <a-form-item field="department" label="部门">
              <template v-if="editModal.bindProps.mode === 'detail'">
                <span>{{ form.state.department }}</span>
              </template>
              <DictSelect
                v-else
                v-model="form.state.department"
                type="department"
                placeholder="请选择部门"
              />
            </a-form-item>
          </a-grid-item>

          <a-grid-item :span="24">
            <a-form-item field="email" label="邮箱">
              <template v-if="editModal.bindProps.mode === 'detail'">
                <span>{{ form.state.email }}</span>
              </template>
              <a-input
                v-else
                v-model="form.state.email"
                placeholder="请输入邮箱"
              />
            </a-form-item>
          </a-grid-item>

          <a-grid-item v-if="editModal.bindProps.mode === 'detail'" :span="24">
            <a-form-item field="createdAt" label="创建时间">
              <span>{{ form.state.createdAt }}</span>
            </a-form-item>
          </a-grid-item>
        </a-grid>
      </a-form>
    </template>
  </DetailDrawer>
</template>
